<template>
  <div class="layout-padding page-main">
    <div class="layout-padding-auto layout-padding-view">
      <div class="header" v-if="showHeader">
        <div class="title">
          <slot name="left">
              {{ title || defaultTitle }}
          </slot>
        </div>
        <div class="tool"><slot name="right"/></div>
      </div>
      <div class="page-container" :style="{height:domHeight+'px',overflow: 'auto', overflowX: 'hidden'}">
        <slot/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="pageMain">
import { reactive, ref, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
const props = defineProps({
  title: {
    type: String,
    default: () => '',
  },
  showHeader: {
    type: Boolean,
    default: () => true,
  }
});
const route = useRoute();
const defaultTitle = ref(route.name);
const domHeight = ref(0);
const getDomHeight = () => {
  let winHeight = document.body.clientHeight;
  domHeight.value = winHeight - 66;
};

onMounted( () => {
  getDomHeight();
})
</script>
